import type { ElementStyleConfig } from '../../../../../../lib/abstract'
import { StyleModule } from '../../../../../../lib/abstract'
import {
  AppStyleCollections,
  BODY_SELECTOR,
} from '../../../../../../types/constants'

export class CSDNStyle extends StyleModule {
  private static instance: CSDNStyle

  readonly CONTAINER_STYLE: ElementStyleConfig[] = [
    {
      selector: '.hljs-button',
      description: '点击复制按钮',
      enabled: true,
      styles: {
        normal: {
          right: '16px',
        },
      },
      inline: true,
      condition: () => {
        return $('.btn-code-notes').hasClass(AppStyleCollections.Hide.AD)
      },
    },
  ]

  readonly GLOBAL_STYLE: string = `
${BODY_SELECTOR} #mainBox main {    
  /* AI写代码按钮 */
  button.btn-code-notes {
    display: none !important;
  }
  
  /* 复制代码按钮 */
  /* 类型一：复制按钮在代码块工具栏中 */
  .opt-box .hljs-button {
    position: relative !important;
    margin-left: auto !important;
    padding: 2px 58px 2px 18px !important;
    &:after {
      /* 居中定位 */
      position: absolute;
      top: 50%;
      left: 50%;
      padding-left: 10px;
      transform: translate(-50%, -50%);
      margin-top: 0 !important;
      
      /* 防止文字换行 */
      white-space: nowrap !important;
    }
  }
  
  /* 类型二：复制按钮悬浮在代码块中 */
  code .hljs-button {
    width: 68px !important;
    top: 4px !important;
  
    &:after {
      position: absolute !important;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding-left: 1.2em !important;
    }
  }
}
  `

  /**
   * 获取单例实例
   */
  public static getInstance(): CSDNStyle {
    if (!CSDNStyle.instance) {
      CSDNStyle.instance = new CSDNStyle()
    }
    return CSDNStyle.instance
  }
}
